<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <p>用户注册</p>
        </header>
        <!-- 表单部分 -->
        <ul class="form-box">
            <li>
                <div class="title">手机号码：</div>
                <div class="content">
                    <input
                        type="text"
                        @blur="checkUserId"
                        v-model="user.userId"
                        placeholder="手机号码"
                    />
                </div>
            </li>
            <li>
                <div class="title">密码：</div>
                <div class="content">
                    <input
                        type="password"
                        v-model="user.password"
                        placeholder="密码"
                    />
                </div>
            </li>
            <li>
                <div class="title">确认密码：</div>
                <div class="content">
                    <input
                        type="password"
                        v-model="confirmPassword"
                        placeholder="确认密码"
                    />
                </div>
            </li>
            <li>
                <div class="title">用户名称：</div>
                <div class="content">
                    <input
                        type="text"
                        v-model="user.userName"
                        placeholder="用户名称"
                    />
                </div>
            </li>
            <li>
                <div class="title">性别：</div>
                <div class="content" style="font-size: 3vw">
                    <input
                        type="radio"
                        v-model="user.userSex"
                        value="1"
                        style="width: 6vw; height: 3.2vw"
                    />男
                    <input
                        type="radio"
                        v-model="user.userSex"
                        value="0"
                        style="width: 6vw; height: 3.2vw"
                    />女
                </div>
            </li>
        </ul>
        <div class="button-login">
            <button @click="register">注册</button>
        </div>
        <!-- 底部菜单部分 -->
        <Footer></Footer>
    </div>
</template>
<script>
import Footer from "../components/Footer.vue";
export default {
    name: "Register",
    data() {
        return {
            user: {
                userId: "",
                password: "",
                userName: "",
                userSex: 1,
            },
            confirmPassword: "",
        };
    },
    methods: {
        checkUserId() {
            let url =`UserController/getUserById/${this.user.userId}?token=${this.token}`;
            this.$axios.get(url)
                .then((response) => {
                    if (response.data.result == 1) {
                        this.user.userId = "";
                        alert("此手机号码已存在！");
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
        },
        register() {
            if (this.user.userId == "") {
                alert("手机号码不能为空！");
                return;
            }
            if (this.checkPhoneNumber() == false) {
                alert("手机号码格式错误！");
                return;
            }
            if (this.user.password == "") {
                alert("密码不能为空！");
                return;
            }
            if (this.user.password != this.confirmPassword) {
                alert("两次输入的密码不一致！");
                return;
            }
            if (this.user.userName == "") {
                alert("用户名不能为空！");
                return;
            }
            //注册请求
            let url =`UserController/saveUser/${this.user.userId}/${this.user.password}/${this.user.userName}/${this.user.userSex}`;
            this.$axios.post(url)
                .then((response) => {
                    if (response.data.result > 0) {
                        alert("注册成功！");
                        this.$router.go(-1);
                    } else {
                        alert("注册失败！");
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
        },
        checkPhoneNumber() {
            var pattern = /^1[3456789]\d{9}$/;
            return pattern.test(this.user.userId);
        },
    },
    components: {
        Footer,
    },
};
</script>
<style scoped>
/****************** 总容器 ******************/
.wrapper {
    width: 100%;
    height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097ff;
    color: #fff;
    font-size: 4.8vw;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

/****************** 表单部分 ******************/
.wrapper .form-box {
    width: 100%;
    margin-top: 12vw;
}

.wrapper .form-box li {
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
    display: flex;
    align-items: center;
}

.wrapper .form-box li .title {
    flex: 0 0 18vw;
    font-size: 3vw;
    font-weight: 700;
    color: #666;
}

.wrapper .form-box li .content {
    flex: 1;
}

.wrapper .form-box li .content input {
    border: none;
    outline: none;
    width: 100%;
    height: 4vw;
    font-size: 3vw;
}

.wrapper .button-login {
    width: 100%;
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
}

.wrapper .button-login button {
    width: 100%;
    height: 10vw;
    font-size: 3.8vw;
    font-weight: 700;
    color: #fff;
    background-color: #38ca73;
    border-radius: 4px;
    border: none;
    outline: none;
}

.wrapper .button-register {
    width: 100%;
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
}

.wrapper .button-register button {
    width: 100%;
    height: 10vw;
    font-size: 3.8vw;
    font-weight: 700;
    color: #666;
    background-color: #eee;
    border-radius: 4px;
    border: none;
    outline: none;
    border: solid 1px #ddd;
}
</style>
